<template>
  <div class="fundodoo-features-condition">
    <div class="fundodoo-form">
      <div title="状态" class="fundodoo-form-item">
        <el-select v-model="condition.status" size="small" placeholder="状态选择" @change="statusChange">
          <el-option
            v-for="item in allStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div title="名称" class="fundodoo-form-item">
        <el-input
          v-model="condition.categoryName"
          suffix-icon="el-icon-search"
          maxlength="18"
          show-word-limit
          size="small"
          placeholder="请输入名称"
          @input.native="nameChange"
        />
      </div>

    </div>
    <div class="fundodoo-params-action">
      <el-button size="small" type="warning" plain @click="resetCondition">重置</el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'GoodsCondition',
  components: {

  },
  props: {
    conditionState: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      timeout: null,
      condition: {
        status: -1,
        categoryName: ''
      },
      allStatus: [{
        value: -1,
        label: '全部'
      }, {
        value: 1,
        label: '显示'
      }, {
        value: 0,
        label: '隐藏'
      }]
    }
  },
  watch: {
    conditionState(v) {
      this.$nextTick(function() {
        this.condition.status = v.status
        this.condition.categoryName = v.categoryName
      })
    }
  },
  created() {

  },
  beforeMount() {

  },
  mounted() {
    this.$nextTick(function() {
      this.fetchData(true, true)
    })
  },
  methods: {
    statusChange() {
      this.fetchData(true)
    },
    nameChange() {
      this.fetchData(true)
    },
    resetCondition() {
      this.condition.status = -1
      this.condition.categoryName = ''
      this.fetchData(true)
    },
    fetchData(pushState, replaceState) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        const playload = this.condition
        playload.pushState = pushState
        playload.replaceState = replaceState
        this.$emit('fetchConditionChange', playload)
      }, 518)
    }
  }
}

</script>
